<template>
  <el-card class="table-card">
    <el-table 
      :data="displayData" 
      v-loading="loading" 
      style="width: 100%" 
      @selection-change="$emit('selection-change', $event)"
    >
      <el-table-column type="selection" width="55" resizable />
      <el-table-column prop="course.name" label="课程名称" min-width="120" resizable />
      <el-table-column prop="term.name" label="学期" width="100" resizable />
      <el-table-column prop="major.name" label="专业" width="120" resizable />
      <el-table-column prop="cengCi.name" label="培养层次" width="100" resizable />
      <el-table-column label="授课教师" min-width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.teachers && scope.row.teachers.length > 0">
            {{ scope.row.teachers.map(t => t.name).join(', ') }}
          </span>
          <span v-else class="text-gray-400">未分配</span>
        </template>
      </el-table-column>
      <el-table-column label="学员人数" width="80" resizable>
        <template #default="scope">
          <el-tag size="small">{{ scope.row.studentCount || 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="课程总结" width="120" resizable>
        <template #default="scope">
          <el-tag v-if="scope.row.kcjxzjId" type="success" effect="light">
            已关联
          </el-tag>
          <el-tag v-else type="info" effect="plain">
            未关联
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="320" fixed="right" resizable>
        <template #default="scope">
          <el-button size="small" @click="$emit('view-students', scope.row)">
            <el-icon><View /></el-icon> 查看学员
          </el-button>
          <el-button size="small" type="primary" @click="$emit('manage-scores', scope.row)">
            <el-icon><EditPen /></el-icon> 成绩管理
          </el-button>
          <el-dropdown @command="(command) => $emit('dropdown-command', command, scope.row)">
            <el-button size="small">
              更多 <el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="import">导入成绩</el-dropdown-item>
                <el-dropdown-item command="export">导出成绩</el-dropdown-item>
                <el-dropdown-item v-if="!scope.row.kcjxzjId" command="summary">生成总结</el-dropdown-item>
                <el-dropdown-item v-else command="view-summary">查看总结</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        :current-page="pagination.current || 1"
        :page-size="pagination.pageSize || 10"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total || 0"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="$emit('size-change', $event)"
        @current-change="$emit('current-change', $event)"
      />
    </div>
  </el-card>
</template>

<script>
import { computed } from 'vue'
import { View, EditPen, ArrowDown } from '@element-plus/icons-vue'

export default {
  name: 'TeachingMissionTable',
  components: {
    View,
    EditPen,
    ArrowDown
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    paginatedData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        pageSize: 10,
        total: 0
      })
    }
  },
  emits: [
    'selection-change',
    'view-students',
    'manage-scores',
    'dropdown-command',
    'size-change',
    'current-change'
  ],
  setup(props) {
    // 统一数据源：优先使用 paginatedData，否则使用 tableData
    const displayData = computed(() => {
      return props.paginatedData.length > 0 ? props.paginatedData : props.tableData
    })

    return {
      displayData
    }
  }
}
</script>

<style scoped>
.table-card {
  margin-bottom: 20px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.text-gray-400 {
  color: #9ca3af;
}

:deep(.el-table .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
